<template>
	<div>
    <!--基本信息-->
		<el-card shadow="never">
			<div style="display: inline-flex;width: 100%;">
        <div class="edu-page-title" style="font-size: 20px; margin-bottom: 32px;">{{$t('common.text.baseInfo')}}</div>
        <el-button style="margin-inline-start: auto;" @click="back">{{$t('common.btn.back')}}</el-button>
			</div>
      <el-form :model="content" label-position="left" ref="baseForm" label-suffix="：">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item :label="$t('courses.applicationNo')">
              <span>{{this.rollInfo.no}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item :label="$t('courseSummary.applicant')">
              <span>{{content.name}}（{{content.id}}）</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="$t('courses.code')">
              <span>{{content.code}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('dic.faculty')">
              <span>{{content.faculty}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('teachers.title')">
              <span>{{this.dataInfo.title}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('message.applyDate')">
              <span>{{ this.rollInfo.time | formatDate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
		</el-card>

    <el-card shadow="never">
      <div style="display: inline-flex;width: 100%;">
        <div class="edu-page-title" style="font-size: 20px; margin-bottom: 32px;">{{$t('application_detail')}}</div>
      </div>
      <el-form :model="approvalInfo" style="margin-top:13px" label-suffix="：" label-position="right" label-width="90px"
        ref="approveForm" :rules="approveFormRules">
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('application_type')">
              <span>{{this.rollInfo.wfTypeName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('approval_content')">
              <span>{{$t('teachers.applicationTeaching')}}：{{this.rollInfo.wfTypeName}}</span>
              <div>
                <span style="word-break: break-all;white-space: normal;width:auto;">{{$t('teachers.applicationReason')}}：{{this.content.reason}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!--附件-->
        <el-row :gutter="24" v-if="this.attachments.length > 0">
          <el-col :span="20">
            <el-form-item :label="$t('teachers.attachment')">
              <div v-for="item in this.attachments">
                <el-button :key="item" type="text" @click="handleGetFile(item)">{{ item }}</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('courseSummary.applySuggest')" prop="content">
              <el-input v-model="approvalInfo.content" type="textarea" rows="3" maxlength="500" :placeholder="$t('inputPlaceholder')"
                prop="content"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!--附件上传-->
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('attachment_upload')">
              <div class="display-inline-block">
                <el-upload ref="approveUpload" :headers="{'X-Token': $store.state.session.sessionid}"
                  :data="{bucketname: 'face', folderpath: 'file'}" :on-preview="handleAvatarPreview"
                  :on-remove="handleAvatarRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                  class="upload-demo" action="/api/commonservice/obsfile/uploadfile" multiple>
                  <el-button size="small" type="primary">{{$t('courses.clickUpload')}}</el-button>
                  <span class="el-upload__tip">
                    <i style="font-size:16px;color: rgba(26, 104, 223, 0.207843);" class="el-icon-warning"></i>
                    {{$t('attachment_upload_tip')}}
                  </span>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="float-right" style="margin:12px 0">
        <el-button type="danger" @click="handleNoPass">{{$t('message.reject')}}</el-button>
        <el-button type="primary" @click="handlePass">{{$t('message.pass')}}</el-button>
      </div>
    </el-card>

    <el-card shadow="never" style="margin-top:12px">
      <div class="edu-page-title">{{$t('classroomTitle.approvalProgress')}}</div>
      <edu-table :data="this.rollInfo.listApproveHistory" :selection="false" :pagination="false">
        <edu-table-column :label="$t('score.time')">
          <template slot-scope="scope">{{ getFormatTime(scope.row.time)}}</template>
        </edu-table-column>
        <edu-table-column :label="$t('score.appPerson')">
          <template slot-scope="scope">{{ scope.row.approvorName}}({{scope.row.approvorId}})</template>
        </edu-table-column>
        <edu-table-column :label="$t('message.department')">
          <template slot-scope="scope">{{ scope.row.faculty}}</template>
        </edu-table-column>
        <edu-table-column :label="$t('message.operating')">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result === 'COMMIT'" type="success" size="mini">{{$t('message.submit')}}</el-tag>
            <el-tag v-else-if="scope.row.result === 'Process'" type="success" size="mini">{{$t('message.pass')}}</el-tag>
            <el-tag v-else type="danger" size="mini">{{$t('message.reject')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('score.description')" show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.content}}</span>
          </template>
        </edu-table-column>
      </edu-table>
    </el-card>
	</div>
</template>
<script>
import filters from "common/src/filters";
import {selectApproFlow, approvalThrough, approvalReject} from "common/src/api/approval";
import { downloadfile } from "common/src/api/upload";//附件下载
import { editApprovalStatus } from "common/src/api/resource/teachers";


export default {
	name: "TeachingApproveComponent",
  props: {
    dataInfo:{
      default: null
    }
  },
  filters: {
      formatDate(date) {
          return filters.formatDate(date, "yyyy/MM/dd");
      }
  },
	data() {
		return {
			rollInfo: [],
      attachments:[],//审核后附件
      content: "",
			approvalInfo: {
				no: "",
				content: "",
				oaNo: "",
				approveAttachment: [],//附件
				remark: null
			},
      approveFormRules: {
          content: [
              {
                  required: true,
                  message: this.$t("result.plzEnterComments"),
                  trigger: "change"
              }
          ]
      }
		};
	},
  mounted() {
      this.getOptions();
  },
	methods: {
    //时间格式化
    getFormatTime(val) {
        return moment(val).format("YYYY/MM/DD HH:mm:ss");
    },

		handleAvatarPreview() {},
    beforeAvatarUpload(file) {
        this.flag = file.size / 1024 / 1024 < 3;
        if(!this.flag){
            this.$message({
                type: "warning",
                message: this.$t('attachment_upload_tip')
            });
        }
        return this.flag;
    },
		handleAvatarRemove(file, fileList) {
			if(file.status!=='success')return;
			const removeFile = file.response.data[file.name].objectkey;
			_.remove(this.approvalInfo.approveAttachment, function(item) {
				return item === removeFile;
			});
		},
		handleAvatarSuccess(response, file, fileList) {
			if (response && response.data) {
				this.approvalInfo.approveAttachment.push(
					response.data[file.name].objectkey
				);
			}
		},
		handleGetFile(objectKey) {
			if (!objectKey) return;

			downloadfile(objectKey);
		},

		getOptions() {
			if (this.dataInfo.no) {
        selectApproFlow(this.dataInfo.no).then(res => {
          if (res && res.data) {
            this.attachments = [];
            this.approvalInfo.no = res.data.no;//申请编号

            this.content = JSON.parse(res.data.content);//申请信息
            res.data.listApproveHistory.forEach(item => {
              item.fileInfo = JSON.parse(item.fileInfo);
              if(item.fileInfo && item.fileInfo.approveAttachment){
                  this.attachments = this.attachments.concat(item.fileInfo.approveAttachment);
              }
            });
            this.rollInfo = res.data;
          }
        });
			} else {
				this.back();
			}
		},


		back() {
			this.$emit("back", "main");
		},

    handlePass() {
        this.$refs.approveForm.validate(valid => {
          if (valid) {
              approvalThrough(this.approvalInfo).then(res => {
                  //修改状态至审批中
                  editApprovalStatus(this.dataInfo.applyId).then(res => {
                    this.back();
                  });
              });
          }
        });
    },
    handleNoPass() {
      this.$refs.approveForm.validate(valid => {
        if (valid) {
          approvalReject(this.approvalInfo).then(res => {
              this.back();
          });
        }
      });
    }
	}
};
</script>
<style lang="scss" scoped>

</style>
